<template>
  <div class="box" id="rightContent" ref="rightContent">
    <div class="flex-space nav-box">
      <img
        src="../../assets/overview/logo.png"
        @click="toIndex"
        class="logo"
        alt=""
      />
      <div class="flex">
        <div class="flex nav-list">
          <div
            class="nav cursor"
            :class="res.isActive ? 'active' : ''"
            @click="selectTab(i)"
            v-for="(res, i) in tabContent"
            :key="res.name"
          >
            {{ res.name }}
          </div>
        </div>
        <div
          class="flex cursor tz"
          @click="toPageFun('https://app.xfi.network')"
        >
          Launch App <img src="../../assets/overview/tz.png" alt="" />
        </div>
      </div>
    </div>
    <div class="flex-space nav-h5-box">
      <div class="flex">
        <img
          class="menu"
          @click="drawer = true"
          src="../../assets/overview/menu.png"
          alt=""
        />
        <img class="logo" src="../../assets/overview/logo.png" alt="" />
      </div>
      <div class="flex cursor tz" @click="toPageFun('https://app.xfi.network')">
        Launch App <img src="../../assets/overview/tz.png" alt="" />
      </div>
    </div>
    <el-drawer
      size="80%"
      :visible.sync="drawer"
      direction="ltr"
      :before-close="handleClose"
    >
      <div class="menu-box">
        <img
          src="../../assets/overview/logo.png"
          alt=""
          style="position: absolute; top: 12px; left: 20px"
        />
        <div class="flex menu-tab-box">
          <div
            class="menu-tab"
            :class="res.isActive ? 'active' : ''"
            @click="selectTab(i)"
            v-for="(res, i) in tabContent"
            :key="res.name + i"
          >
            {{ res.name }}
          </div>
        </div>
        <div class="left-menu-list-box" v-for="(res, a) in list" :key="a">
          <div
            class="flex menu-list-title cursor bold"
            @click="selectMenu(a)"
            :class="res.isActive ? 'active' : ''"
          >
            {{ res.name }}
          </div>
          <div v-for="(item, b) in res.list" :key="b">
            <div
              class="flex menu-title cursor bold"
              :class="item.isActive ? 'active' : ''"
              @click="selectMenu(a, b)"
            >
              {{ item.name }}
            </div>
            <div
              class="flex menu cursor bold"
              :class="data.isActive ? 'active' : ''"
              v-for="(data, c) in item.list"
              :key="c"
              @click="selectMenu(a, b, c)"
            >
              {{ data.name }}
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <div style="height: 61px"></div>
    <div class="content">
      <div class="left-box">
        <div class="left-menu-list-box" v-for="(res, a) in list" :key="a">
          <div
            class="flex menu-list-title cursor bold"
            @click="selectMenu(a)"
            :class="res.isActive ? 'active' : ''"
          >
            {{ res.name }}
          </div>
          <div v-for="(item, b) in res.list" :key="b">
            <div
              class="menu-title cursor bold ov-1x"
              :class="item.isActive ? 'active' : ''"
              @click="selectMenu(a, b)"
            >
              {{ item.name }}
            </div>
            <div
              class="menu cursor bold ov-1x"
              :class="data.isActive ? 'active' : ''"
              v-for="(data, c) in item.list"
              :key="c"
              @click="selectMenu(a, b, c)"
            >
              {{ data.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="content-nav-box">
          <div
            class="ov-1x cursor"
            :class="isScrollIndex == i ? 'active' : ''"
            v-for="(res, i) in content"
            :key="i"
            @click="locationFun(res.top)"
          >
            {{ res.title }}
          </div>
        </div>
        <div class="flex type-list">
          <div class="flex" v-for="(res, i) in typeList" :key="i">
            <div :class="i == typeList.length - 1 ? 'active' : ''">
              {{ res }}
            </div>
            <img
              v-if="i != typeList.length - 1"
              src="../../assets/overview/more.png"
              alt=""
            />
          </div>
        </div>

        <div class="elSelect">
          <el-select
            @change="selectLocationFun"
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, i) in content"
              :key="i"
              :label="item.title"
              :value="item.title"
            >
            </el-option>
          </el-select>
        </div>

        <div
          class="article-box"
          v-if="typeList[0] == 'Overview' && typeList[1] == 'XFI'"
          style="max-width: 75%; text-align: center"
        >
          <div
            class="title bold"
            style="margin-bottom: 20px; font-size: 30px; text-align: left"
          >
            Cognitive Economy
          </div>
          <div
            style="
              line-height: 1.5;
              border-left: 5px solid #f0f0f0;
              padding: 20px 0 20px 20px;
              margin-bottom: 50px;
              color: #6f6f6f;
              text-align: left;
              font-size: 16px;
            "
          >
            <div style="margin-bottom: 20px">
              The achievements of human civilization begin with the creation of
              consciousness, from the backward to the developed material world,
              from the barren to the rich virtual metaverse, cognitive
              creativity is building the future world little by little
            </div>
            <div style="margin-bottom: 20px">
              It is a great power that we categorize and value as a creator
              economy to make the most of each unique cognition for its social
              benefit.
            </div>
            <div style="margin-bottom: 20px">
              web3.0 is a sovereign free democratic soil where data ownership,
              revenue and governance return to the user, and the underlying
              structure changes to bring back a new creativity to the entire
              internet ecology.
            </div>
            <div style="margin-bottom: 20px">
              It greatly stimulates people's positivity to participate in
              creation and express their cognition. The new soil brews a new
              business picture and information efficiency, and every web3
              citizen can create unique IP value!
            </div>
          </div>
        </div>

        <div
          v-for="(res, i) in content"
          :key="i"
          class="article-box"
          style="max-width: 70%; text-align: center"
        >
          <div
            class="title bold"
            :id="res.id"
            style="margin-bottom: 10px; font-size: 30px; text-align: left"
          >
            {{ res.title }}
          </div>
          <div v-for="item in res.list" :key="item.txt">
            <div
              v-if="item.txt"
              :class="item.isBold ? 'bold' : ''"
              style="
                line-height: 1.5;
                margin-bottom: 20px;
                color: #666666;
                text-align: left;
                font-size: 16px;
              "
            >
              {{ item.txt }}
            </div>
            <div v-if="item.img">
              <el-image
                v-for="img in item.img"
                :key="img"
                :src="img"
                style="margin: 20px auto 50px"
              ></el-image>
            </div>

            <!-- <el-image
              :key="i"
              v-if="item.img"
              v-for="img in item.img"
              :src="img"
              style="margin: 20px auto 50px"
            ></el-image> -->
          </div>
          <div style="height: 30px"></div>
        </div>
      </div>
    </div>
    <div class="copyright-box">
      <div class="flex-space friendship-box">
        <img
          v-for="res in 4"
          :key="res"
          @click="
            toPageFun(
              res == 1
                ? 'https://t.me/xfinetwork'
                : res == 2
                ? 'https://discord.gg/DSp8g5wyuJ'
                : res == 3
                ? 'https://twitter.com/xfi_network1'
                : 'https://medium.com/@xfinetwork'
            )
          "
          :src="require(`../../assets/overview/${res}.png`)"
          alt=""
        />
      </div>
      <div class="flex-center copyright">© 2022 XFI All rights reserved.</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      drawer: false,
      list: [],
      tabContent: [
        {
          name: "Overview",
          isActive: true,
          list: [
            {
              name: "Value network",
              isActive: true,
              content: [
                {
                  title: "Influence is value",
                  id: "A",
                  list: [
                    {
                      txt: "In Value Interaction Networks, all information will be given a price, people`s identities will be data-driven to define the value of their influence, and everything will have a price. The law of value of the physical world will be reproduced in the Internet, and it will perhaps be even more effective than in the real world. Therefore, people will have to re-examine the influence of their actions on the Internet.",
                    },
                    {
                      txt: "The user`s behavior is recorded on an immutable web3 identity, which is a biography of growth and personal credibility, the core value of the user.",
                    },
                    { img: [require("../../assets/overview/c1.png")] },
                  ],
                },
                {
                  title: "Ad business",
                  id: "B",
                  list: [
                    {
                      txt: `Ad commerce is a typical representative of the influence economy, spreading information widely through influence. In the past two decades, online ads have fueled the rapid development of the Internet to form value. When ads rise, all industries flourish. In the era of web 3.0 with the rise of users, ads will continue to be an important support for the development of the Internet.`,
                    },
                  ],
                },
              ],
            },
            {
              name: "Xfi AD protocol",
              isActive: false,
              content: [
                {
                  title: "Generic Ad Protocols",
                  id: "A",
                  list: [
                    {
                      txt: `XFI is a generic ad protocol for distributed applications developed based on smart contracts and distributed storage. It allows users to freely customize their own ads schemes (duration, cost), distribution targets, etc. and to reward them with economic models for the purpose of fast distribution interactions.`,
                    },
                  ],
                },
                {
                  title: "Comment to Earn",
                  id: "B",
                  list: [
                    {
                      txt: `Paid ads usually spread interactions in the form of topics, where users can comment on topics that interest them and share the cost of the ad according to the impact of the comment. So every comment you make may create revenue for you. When your XID status is more influential, the revenue is more obvious.`,
                    },
                  ],
                },
                {
                  title: "Growing Influence XID",
                  id: "C",
                  list: [
                    {
                      txt: `XID is a distributed data identity for the web3.0 world, consisting of data such as magnetic, activity value and followers, which will change and grow with the user's behavior in the web3 world.`,
                      img: [require("../../assets/overview/c12.png")],
                    },
                  ],
                },
              ],
            },
            {
              name: "Tokenmic",
              isActive: false,
              content: [
                {
                  title: "C2E drives business growth",
                  id: "A",
                  list: [{ img: [require("../../assets/overview/c2.png")] }],
                },
                {
                  title: "Tokens drives user growth",
                  id: "B",
                  list: [{ img: [require("../../assets/overview/c3.png")] }],
                },
              ],
            },
            {
              name: "Roadmap",
              isActive: false,
              content: [
                {
                  title: "Develop",
                  id: "A",
                  list: [{ img: [require("../../assets/overview/c4.png")] }],
                },
                {
                  title: "User growth",
                  id: "B",
                  list: [{ img: [require("../../assets/overview/c5.png")] }],
                },
                {
                  title: "Financing",
                  id: "C",
                  list: [{ img: [require("../../assets/overview/c13.png")] }],
                },
              ],
            },
          ],
        },
        {
          name: "FAQ",
          isActive: false,
          list: [
            {
              name: "Product",
              isActive: true,
              content: [
                {
                  title: "What is XFI?",
                  id: "A",
                  list: [
                    {
                      txt: `XFI is an efficient social ad protocol based on web3, an open platform that integrates ad publishing, comment to earn and vote to mining.`,
                    },
                  ],
                },
                {
                  title: "How to use XFI to publish ads",
                  id: "B",
                  list: [
                    {
                      txt: "a. Connect to the BSC wallet and ensure that the account has enough tokens to pay for the Ad",
                    },
                    { txt: "b. Upload image, enter title, content" },
                    {
                      txt: `c. Set the amount of the ads fee, the length of the paid Ad, the conditions of the XID of the allowed comments, the tag of the Ad, etc.`,
                    },
                    { txt: `Note:` },
                    {
                      txt: `1)Ad fee: Paid with XFI token $XFI, minimum quantity 100 $XFI ; `,
                    },
                    {
                      txt: `2)Duration of the ad: The publisher can specify the validity of the ad for any length of time (1-30 days), default 3 days;`,
                    },
                    {
                      txt: `3)Participation Threshold: 1)set a threshold for ad comments, only eligible users can participate in comments; 2)by setting (comment settings) three parameters for the Commentator's XID, all three parameters of the user's XID are greater than or equal to the threshold value to participate in comments;3) the set XID parameters can’t be greater than the average, to avoid too few eligible participants. There is no threshold for voting at this stage;`,
                    },
                    {
                      txt: `4)Set ad tag: Set the tag of the ad with the # , the higher the ad tag matches the user's XID tag, the higher the priority of display;`,
                    },
                    {
                      txt: `5)Private message: the ad is dynamically posted to the specified XID and the target user will be notified by a private message within the site; done with the @. Both @username and Token ID are possible; only the username is displayed when it is displayed;`,
                    },
                    { txt: `6)Types of Ad: voting, Topics ` },
                    {
                      txt: `a.Voting : Ads are posted with content containing options like ABCD, Advertisers can define their own voting options;`,
                    },
                    {
                      txt: `b. Topics (External Forms included): It can be the project's activities, publicity, interpretation, etc., Advertisers can fill in links to External Forms to collect further relevant information. For example, a link to a Google form or gleam. After completing an ad task, the user is redirected to a third party platform to fill in the form via a link abbreviation on the ad detail page. At this stage XFI will not record the subsequent actions of the user filling in the form.`,
                    },
                  ],
                },
                {
                  title: "Ad Ranking Rules",
                  id: "C",
                  list: [
                    { txt: `HOT ranking: ` },
                    {
                      txt: `Top first, ranked by the total number of votes; if the total number of votes is the same, ranked by the number of agreed votes .`,
                    },
                    { txt: `Latest ranking: ` },
                    {
                      txt: `Ranked by the time the ad is published, the later the ad is published, the higher the ranking.`,
                    },
                    { txt: `Fee ranking:` },
                    {
                      txt: `Ads fee (online) ranking, the higher the fee, the higher the ranking.`,
                    },
                    { txt: `Following ranking: ` },
                    {
                      txt: `List of ads with comments and votes from people I follow; ranked by time, the later they are, the higher the ranking.`,
                    },
                  ],
                },
                {
                  title: "About Comment to Earn (C2E)",
                  id: "D",
                  list: [
                    {
                      txt: `The way you participate in ad reviews and get a share of the fee of the ad after getting votes from users is defined as Comment to Earn .`,
                    },
                    {
                      txt: `1)Comment = Level 1 comment on an ad, anyone who meets the Commentator XID threshold set at the time the ad is posted can participate in the comment. Follow-up comments refer to level 2, 3 and 4 comments, There is no status or limit on the number of follow-up comments;`,
                    },
                    {
                      txt: `2)Comment Eligibility: You can comment if you meet the threshold set for the ad, otherwise you can't comment; The same ad, an XID / address can only comment once;`,
                    },
                    {
                      txt: `3)Comment revenue eligibility: Tentative unified threshold (M ≥ 100, A ≥ 300, F ≥ 600), below but meet the threshold of the ad, you can comment, but no revenue, XID parameters can be accumulated normally;`,
                    },
                    {
                      txt: `4)Comment revenue: meet the C2E comments, according to the weight of the distribution of ad fees;`,
                    },
                    {
                      txt: `5)Comment ranking: comments are ranked by XID weighting, from highest to lowest;`,
                    },
                    {
                      txt: `6)Whenever an ad is clicked on, comments are only available after 10 seconds, only first level Commentator are eligible for ad rates, comments can't be modified after submission.`,
                    },
                  ],
                },
                {
                  title: "About Vote to Mining (V2M)",
                  id: "E",
                  list: [
                    {
                      txt: `A vote is an opinion expressed by the platform user on the ad, divided into two actions: agree and disagree. If the content of the ad contains multiple choice questions (not agree/disagree button), doing the multiple choice question and agree/disagree have the same effect.`,
                    },
                    {
                      txt: `1)Each address/XID can only vote once for each ad; voting and commenting are two systems that don’t affect each other;`,
                    },
                    {
                      txt: `2)Voting data (Proportion of agree, disagree) determines the ranking of ads in terms of popularity;`,
                    },
                    {
                      txt: `3)You can vote only after 10 seconds of clicking on the ad.`,
                    },
                  ],
                },
                {
                  title: "Influence of the vote",
                  id: "F",
                  list: [
                    {
                      txt: `For ads: those with a high number of votes will be ranked higher in the hot ranking.For Commentator: high number of votes and high ads revenue allocated to Commentator.`,
                    },
                    {
                      txt: `For you: increase your Activity data, access to mining revenue and possible benefits in terms of ads.`,
                    },
                  ],
                },
                {
                  title: "Rules for the distribution of ads fee",
                  id: "G",
                  list: [
                    { txt: `1. Vote to mining $XFI` },
                    {
                      txt: `1)Voters enjoy the benefits of mining:agree, disagree ,multiple choice questions have the same effect, and participants share the benefits of mining at the end of the ad;`,
                    },
                    {
                      txt: `2)3% of the Ad fee as the new mining, and 1/3 of the new mining as the voting mining;`,
                    },
                    {
                      txt: `3)Mining will be generated when the ad is posted and will be split at the end of the ad, estimated revenue = paid ad fee * 1% / number of votes, paid ad fee is 0 if no one comments;`,
                    },
                    {
                      txt: `4)Each time the earnings are accumulated and recorded in the system, when you want to receive, just sign to authorize the payment of gas to receive all.`,
                    },
                    { txt: `2. Review sub Ad fee` },
                    {
                      txt: `First-level commentators share the ads fee. The rules are as follows.`,
                    },
                    {
                      txt: `1)When the ad expires, the ad fee is allocated (calculated as revenue) to eligible commentators (ad length ≥ 1 day) in a lump sum according to the weighting // comments without C2E eligibility don't share the ad fee;`,
                    },
                    {
                      txt: `2)Revenue = Ad Fee * (commentators weight + direct follow-up commentators weight) / (all commentators weights + all direct follow-up commentators weight);`,
                    },
                    {
                      txt: `3)The ranking of comments by the weight of the Commentator's XID.`,
                    },
                    {
                      txt: `4)If no one participates in the comments, the ad fee can be 100% retrieved (voters don't share mining), there is no ad fee balance with comments;`,
                    },
                    {
                      txt: `5)Show the estimated percentage of revenue in the comment list, e.g. estimated revenue 30.11% means that this comment will share 30.11% of the total fee.`,
                    },
                  ],
                },
                {
                  title: "Governance of ads",
                  id: "H",
                  list: [
                    {
                      txt: `1)Modification and deletion of ads don't affect the allocation of funds that have already occurred;`,
                    },
                    {
                      txt: `2)Ad modification is limited to content only, not including amount, time and other information. deletion means blocking the display, not physical deletion;`,
                    },
                    {
                      txt: `3)Users can only delete the content they have posted;`,
                    },
                    {
                      txt: `4)Administrator can delete spam ads. 50% of the ad fee will be deducted and the remaining fee can be retrieved by the publisher after the ad expires;`,
                    },
                    {
                      txt: `5)ads are not restricted in content, and the same ad content can be modified by the advertiser to edit the ad;`,
                    },
                    {
                      txt: `6)comments can't be deleted at this stage, and will be deleted by DAO organization management at a later stage.`,
                    },
                  ],
                },
                {
                  title: "How to improve the communication efficiency of ads",
                  id: "I",
                  list: [
                    {
                      txt: `1)Increase the amount of the ads fee appropriately to attract more Commentator to spread the word together;`,
                    },
                    {
                      txt: `2)Spacing out multiple messages to increase exposure on the latest list;`,
                    },
                    {
                      txt: `3)Set generic tags and precise Commentator for easy algorithmic pushing;`,
                    },
                    {
                      txt: `4)Add possible benefits to engage the audience in interaction;`,
                    },
                    { txt: `5)@ accurate XID when publish ad.` },
                  ],
                },
              ],
            },
            {
              name: "XID",
              isActive: false,
              content: [
                {
                  title: "What is XID and how to generate it ?",
                  id: "A",
                  list: [
                    {
                      txt: `XID is a distributed identity, consisting of magnetic, followed, activity and tag ,which represents the identity value, activity value and number of followers respectively, and it shows a combination of the users speech influence.
The XID does not need to be generated additionally, it is automatically created when the link wallet is first signed and the token ID can't be modified, users can use functions such as adding avatars and XID to the chain.`,
                    },
                  ],
                },
                {
                  title: "About Magnetic, Activity and Following",
                  id: "B",
                  list: [
                    { txt: `Follower:` },
                    {
                      txt: `The total number of followers of a user, the profile list contains followed,following.`,
                    },
                    { txt: `Activity:` },
                    {
                      txt: `The sum of personal behavior, activity = number of comments + number of follow-up comments + number of votes ( likes and retweets are not included in activity).`,
                    },
                    { txt: `Magnetic:` },
                    {
                      txt: `Feedback from others on my comments (follow-up comments), Magnetic = number of follow-up comments + number of likes + number of @.`,
                    },
                    { txt: `Note:` },
                    {
                      txt: `Under one ad, the user's XID activity increment is capped at 6, and magnetic increment is capped at 3. The advertiser's magnetic growth is not limited.`,
                    },
                    { img: [require("../../assets/overview/c7.png")] },
                    {
                      txt: `When a user signs in XFI for the first time, the various data of the XID is automatically retrieved and updated in real time, and the data can't be tampered with with.`,
                    },
                  ],
                },
                {
                  title: "About Tag",
                  id: "C",
                  list: [
                    {
                      txt: `Users define their own tags to easily sort and receive matching accurate content. (Up to 3 tags per person)`,
                    },
                  ],
                },
                {
                  title: "XID data aggregation",
                  id: "E",
                  list: [
                    {
                      txt: `XID will aggregate interaction information from other web3 platforms such as follower on cyberconnect, mint information on galaxy, and transaction information on opensea.`,
                    },
                    {
                      txt: `Data from head web2 platforms such as twitter and medium will also be taken into account.`,
                    },
                  ],
                },
                {
                  title: "XID identity weights",
                  id: "F",
                  list: [
                    {
                      txt: `Magnetic*70% + Activity*10% + Follwers*20% (Adjustable later based on voting governance).`,
                    },
                    { img: [require("../../assets/overview/c8.png")] },
                  ],
                },
              ],
            },
            {
              name: "XDAO & DAO",
              isActive: false,
              content: [
                {
                  title: "What is XDAO ?",
                  id: "A",
                  list: [
                    {
                      txt: `XDAO is an equity-based NFT. XDAO holders can continuously enjoy the benefits of mining and governance.`,
                    },
                  ],
                },
                {
                  title: "XDAO Issuance",
                  id: "B",
                  list: [
                    { img: [require("../../assets/overview/lssuance.png")] },
                  ],
                },
                {
                  title: "XDAO Rights",
                  id: "C",
                  list: [
                    {
                      txt: `1) 1% of new mining (mining*3%*1/3) as the XDAO holder bonus, of which 50% is allocated to the profit sharing pool and the other 50% will be added to the governance pool;`,
                    },
                    {
                      txt: `2) DAO governance: Holding XDAO have a rights of governance and can receive the benefits of the governance pool; Governance is mainly about voting on newly posted ad messages (delete/keep).`,
                    },
                    {
                      txt: `3) Investment: Holders of XDAO can choose to Stake XDAO to obtain the weight of XFI FUND and enjoy investment returns.`,
                    },
                  ],
                },
                {
                  title: "Works of DAO governance",
                  id: "D",
                  list: [
                    {
                      txt: `This includes business governance (screening and ranking), community self-governance (proposals and voting), and product self-ecology.
Screening is a daily and timely task. Those participating in the governance of the DAO must be holders of the governance rights XDAO, regardless of the Those participating in the governance of the DAO must be holders of the governance rights XDAO, regardless of the number of holdings, and are entitled to participate.
Governance features will be available after v2.3.`,
                    },
                  ],
                },
              ],
            },
            {
              name: "XFI",
              isActive: false,
              content: [
                // {
                //     title: "Issuance and distribution",
                //     id: "A",
                //     list: [
                //         {
                //             txt: `1) Token issuance: unlimited, pre-mined + application mining;`,
                //         },
                //         {
                //             txt: `2) Application mining: Ad fee allocation triggers mining of 3% of new mining, allocated to voters 1%, XDAO 1%, discount pool 1%(No new mines produced when no Ad money is released);`,
                //         },
                //         {
                //             txt: `3）Pre-mined token: Put in the airdrop pool first (quantity and distribution to be determined) for user incentive and swap liquidity.`,
                //         },
                //     ],
                // },
                // {
                //     title: "Airdrop",
                //     id: "B",
                //     list: [
                //         {
                //             txt: `Based on the user XID's magnetic , number of followers, activity , time and other factors, multiple batches of airdrops are conducted for growth stage XID.`,
                //         },
                //     ],
                // },
                // {
                //     title: "Mining Distribution Algorithm",
                //     id: "C",
                //     list: [
                //         {
                //             txt: `Triggered to produce 3% of new mines when Ad fees are allocated, 1% to voters, 1% to XDAO holders and 1% to the discount pool (no new mines are produced when no Ad fees are released).`,
                //         },
                //     ],
                // },
                {
                  title: "About asymmetric trading",
                  id: "D",
                  list: [
                    {
                      txt: `Allowing spot trading and discounted lock-up currency trading is called asymmetric trading and is the preferred method for long term investors.`,
                    },
                    {
                      txt: `When bullish on the value of the XFI scene in the long term, consider buying discount lock coins. For short term traders, spot trading is an option.`,
                    },
                    { txt: `Rules:` },
                    {
                      txt: `1)1% of new mining will be added to the discount pool for discounted pledges;`,
                    },
                    {
                      txt: `2)At the time of the discounted pledge, the XFI is transferred to $BUSDfor a discounted $XFI, at which point the $XFI is locked in and can be retrieved at expiry;`,
                    },
                    {
                      txt: `3)Pledge price = current swap price * 70%, locked for 60 days;`,
                    },
                    {
                      txt: `4)Asymmetric trading has no transaction address or amount restrictions for the time being.`,
                    },
                  ],
                },
                {
                  title: "About liquidity addition",
                  id: "E",
                  list: [
                    {
                      txt: `1)Continuous liquidity addition: distribution of Ad fees (no distribution action) triggers a one-way addition of discount pool $BUSD into the swap pool, with a random value (less than the balance);`,
                    },
                    {
                      txt: `2)Specific liquidity addition: equal amounts of $BUSD and $XFI are added to increase liquidity(Two-way liquidity injection from the treasury pool when the token price rises by 10, 30, 100 times).`,
                    },
                  ],
                },
                {
                  title: "XFI Fund ",
                  id: "F",
                  list: [
                    {
                      txt: `1) We will establish XFI Fund to support early stage quality projects, in-depth cooperation, using the advantages of the XFI platform to support its rapid growth`,
                    },
                    {
                      txt: `2) Holding XDAO users can enter the XFI FUND through the stake channel, is expected to be online in 2.3, details focus on the official announcement`,
                    },
                  ],
                },
              ],
            },
            {
              name: "Other",
              isActive: false,
              content: [
                {
                  title: "About bulk voting (non-real users)",
                  id: "A",
                  list: [
                    {
                      txt: `In an open network, bulk voting can't be avoided, but the risk of bulk number swiping exists because withdrawing mining proceeds consumes gas and generates a limited number of digs. (Commenting and voting can be done simply by signature, and only consumes gas when withdrawing mining revenue).`,
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      content: "",
      typeList: [],
      pageScrollTop: 0,
      value: "On this page",
    };
  },
  computed: {
    isScrollIndex: function () {
      for (let i in this.content) {
        if (this.pageScrollTop <= this.content[i].top + 60) {
          return i;
          // this.$nextTick(()=>{
          //   this.content[i].isActive = true;
          // })
          // console.log('我在：',i<1?this.content[i].title:this.content[i-1].title);
          break;
        }
      }
    },
  },
  mounted() {
    this.list.push(this.tabContent[0]);
    this.$nextTick((res) => {
      // 监听屏幕变化
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth;
          this.screenWidth = window.screenWidth;
          if (this.screenWidth > 1000) {
            this.drawer = false;
          }
          this.getScrollTop();
        })();
      };

      // 初始化选中状态
      this.init();
      // 给页面容器添加滚动监听
      this.$refs.rightContent.addEventListener(
        "scroll",
        (e) => {
          this.pageScrollTop = this.$refs.rightContent.scrollTop + 61;
        },
        false
      );
    });
  },
  methods: {
    toPageFun(url) {
      window.location.href = url;
    },
    handleClose() {
      this.drawer = false;
    },
    selectLocationFun(e) {
      let rightContent = document.getElementById("rightContent");
      this.content.forEach((res) => {
        if (res.title == e) {
          this.$nextTick(() => {
            rightContent.scrollTop = res.top - 60;
          });
        }
      });
    },
    locationFun(top) {
      console.log(top);
      this.$refs.rightContent.scrollTop = top - 60;
    },
    getScrollTop() {
      setTimeout(() => {
        this.content.forEach((res) => {
          let id = document.getElementById(res.id);
          res.top = id.getBoundingClientRect().top;
        });
      }, 300);
    },
    init() {
      this.$nextTick((res) => {
        console.log(this.list);
        this.typeList[0] = this.list[0].name;
        this.content = this.list[0].list[0].content;
        this.typeList[1] = this.list[0].list[0].name;
        this.getScrollTop();
      });
    },
    selectTab(a) {
      this.list = [];
      this.tabContent.forEach((res) => {
        res.isActive = false;
      });
      this.tabContent[a].isActive = true;
      this.list.push(this.tabContent[a]);
      this.selectMenu(0);
    },
    selectMenu(a = 0, b = 0, c = 0) {
      this.$refs.rightContent.scrollTop = 0;
      this.list.forEach((res) => {
        res.isActive = false;
        if (!this.isEmpty(res.list)) {
          res.list.forEach((item) => {
            item.isActive = false;
            if (!this.isEmpty(item.list)) {
              item.list.forEach((data) => {
                data.isActive = false;
              });
            }
          });
        }
      });
      this.content = "";
      this.typeList = [];
      this.$nextTick((nexts) => {
        this.list[a].isActive = true;
        this.content = this.list[a].content;
        this.typeList[0] = this.list[a].name;
        if (!this.isEmpty(this.list[a].list)) {
          this.list[a].list[b].isActive = true;
          this.content = this.list[a].list[b].content;
          this.typeList[1] = this.list[a].list[b].name;
        }
        if (!this.isEmpty(this.list[a].list[b].list)) {
          this.list[a].list[b].list[c].isActive = true;
          this.content = this.list[a].list[b].list[c].content;
          this.typeList[2] = this.list[a].list[b].list[c].name;
        }
        this.value = "On this page";
        this.getScrollTop();
        this.handleClose();
      });
    },
    toIndex: function () {
      this.$router.replace({
        path: "/",
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/css/reset.css");
.box {
  height: 100vh;
  overflow-y: scroll;
  color: #2c2929;
  background: #ffffff;
  .ov-1x {
    font-size: 16px;
  }
  .nav-box {
    position: fixed;
    left: 0;
    top: 0;
    width: calc(100% - 60px);
    height: 60px;
    padding: 0 40px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    z-index: 10;
    font-size: 18px;
    .logo {
      width: 99px;
      height: 50px;
      margin-right: 80px;
      cursor: pointer;
    }
    .nav-list {
      .nav {
        margin-right: 45px;
        &:hover,
        &.active {
          color: #2e65ff;
        }
      }
    }
  }
  .tz {
    img {
      width: 14px;
      height: 14px;
      margin-left: 6px;
    }
  }
  @media screen and (max-width: 414px) {
    .tz {
      font-size: 0.25rem;
      font-weight: bold;
    }
  }
  .nav-h5-box {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    align-items: center;
    width: calc(100% - 40px);
    height: 60px;
    padding: 0 20px;
    background: #ffffff;
    z-index: 10;
    .menu {
      width: 30px;
      height: 30px;
      margin-right: 20px;
    }
    .logo {
      width: 65px;
      /*height: 50px;*/
    }
  }
  .menu-box {
    .menu-tab-box {
      height: 40px;
      .menu-tab {
        padding: 0 20px;
        &.active {
          color: #2e65ff;
        }
      }
    }
    /*width: 340px;*/
    .left-menu-list-box {
      .menu-list-title {
        height: 40px;
        color: #2c2929;
        padding-left: 24px;
        font-size: 16px;
        &:hover,
        &.active {
          position: relative;
          color: #2e65ff;
          &:after {
            content: "";
            position: absolute;
            left: 0;
            width: 3px;
            height: 100%;
            background: #2e65ff;
          }
        }
      }
      .menu-title {
        height: 40px;
        line-height: 40px;
        color: #4b4949;
        padding-left: 31px;
        font-size: 15px;
        &:hover,
        &.active {
          color: #2e65ff;
        }
      }
      .menu {
        height: 40px;
        color: #6f6f6f;
        padding-left: 44px;
        font-size: 13px;
        &:hover,
        &.active {
          color: #2e65ff;
        }
      }
    }
  }
  .content {
    position: relative;
    display: flex;
    /*min-height: calc(100vh - 61px - 272px);*/
    min-height: calc(100vh - 61px);
    .left-box {
      position: fixed;
      height: 100%;
      width: 250px;
      border-right: 6px solid #f0f0f0;
      .left-menu-list-box {
        .menu-list-title {
          height: 40px;
          color: #2c2929;
          padding-left: 24px;
          font-size: 18px;
          &:hover,
          &.active {
            position: relative;
            color: #2e65ff;
            &:after {
              content: "";
              position: absolute;
              left: 0;
              width: 3px;
              height: 100%;
              background: #2e65ff;
            }
          }
        }
        .menu-title {
          height: 40px;
          line-height: 40px;
          color: #4b4949;
          padding-left: 31px;
          font-size: 17px;
          &:hover,
          &.active {
            color: #2e65ff;
          }
        }
        .menu {
          height: 40px;
          color: #6f6f6f;
          padding-left: 44px;
          font-size: 15px;
          &:hover,
          &.active {
            color: #2e65ff;
          }
        }
      }
    }
    .content-box {
      position: relative;
      left: 250px;
      width: calc(100% - 256px - 40px);
      padding-left: 40px;
      .content-nav-box {
        position: fixed;
        top: 93px;
        right: 4%;
        background: #ffffff;
        border-left: 1px solid #f0f0f0;
        padding-left: 17px;
        z-index: 2;
        div {
          /*width: 200px;*/
          max-width: 200px;
          padding: 10px 0;
          &.active {
            color: #2e65ff;
          }
        }
      }
      .type-list {
        padding: 20px 0;
        color: #6f6f6f;
        font-size: 14px;
        .active {
          color: #2e65ff;
        }
        img {
          width: 6px;
          height: 10px;
          margin: 0 10px;
        }
      }
    }
  }
  .copyright-box {
    background-color: #f0f0f0;
    padding-top: 45px;
    .friendship-box {
      width: calc(80% - 40%);
      padding: 40px 20%;
      margin: 0 auto;
      border-bottom: 1px solid #e4e4e4;
      img {
        width: 46px;
        height: 46px;
      }
    }
    .copyright {
      height: 100px;
      color: #585858;
      font-size: 20px;
    }
  }
}
.elSelect {
  display: none;
  margin-bottom: 20px;
}
.el-select-dropdown__item {
  max-width: 300px !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1200px) {
  .content-nav-box {
    display: none;
  }
}
@media screen and (max-width: 1000px) {
  .elSelect {
    display: block;
  }
  .left-box,
  .nav-box {
    display: none;
  }
  .content-box {
    width: calc(100% - 80px) !important;
    left: 0 !important;
    padding: 0 40px !important;
    .article-box {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  .nav-h5-box {
    display: flex !important;
  }
  .friendship-box {
    width: calc(80% - 20%) !important;
    padding: 40px 10% !important;
    img {
      width: 26px !important;
      height: 26px !important;
    }
  }
}
</style>
